<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="Keywords" content="">
	<meta name="Description" content="">
	<title>0611-JS作业-弹球-螺旋</title>
	<style type="text/css">
		html {
			font-family: "Microsoft YaHei";
			height: 100%;
		}
		body{
			height: 100%;
			margin: 0;
		}
		.wrap{
			position: relative;
			width: 100%;
			height: 100%;
		}
		.btn{
			position: absolute;
			z-index: 9;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			width: 100px;
			height: 30px;
			margin: auto;
			background-color: #006eff;
			border-radius: 5px;
			font-size: 16px;
			color: #fff;
			line-height: 30px;
			text-align: center;
			box-shadow: 0 0 8px 0 #000;
			cursor: pointer;
		}
		.btn:hover{
			background-color: #ff8e12;
		}
		i{
			position: absolute;
			z-index: 1;
			width: 100px;
			height: 100px;
			margin: -50px;
			border-radius: 50%;
			box-shadow: 0 0 50px 0 inset;
		}
	</style>
</head>
<body>
	<section class="wrap">
		<div class="btn">点击开始</div>
	</section>
</body>
<script>
	var oWrap = document.getElementsByClassName('wrap')[0],
		oBtn = document.getElementsByClassName('btn')[0],
		oBall = document.getElementsByTagName('i'),
		oXY = [],bW,bH,oI,r,g,b;
	
    //获取浏览器宽高 当浏览器窗口大小发生改变时重新获取
    fnWH();
    window.onresize = function(){
        fnWH();
    };
	
    //生成圆球和运动数据
    for(var i=0;i<8;i++) {
        oI = document.createElement('i');
        oI.style.backgroundColor = `rgb(${fnRdmC()})`;
        oI.style.left = '50px';
        oI.style.top = '50px';
        oWrap.appendChild(oI);
        oXY.push(
	        {
		        x:oBall[i].offsetLeft,
		        y:oBall[i].offsetTop,
		        degX:parseInt(Math.random()*20+1),
		        degY:parseInt(Math.random()*20+1),
		        turnX:true,
		        turnY:true
	        }
        );
    }
	
    //点击按钮 开始运动
	oBtn.onclick = function(){
        oWrap.removeChild(oBtn);//移除按钮
        for(var i = 0;i < oBall.length;i++){
            (function(a){
                setTimeout(Move,a*500);//每个球延迟500毫秒出发
                function Move(){
                    oXY[a].x = oBall[a].offsetLeft + 50;
                    oXY[a].y = oBall[a].offsetTop + 50;
                    //x轴运动
                    if(oXY[a].turnX){
                        oXY[a].x += oXY[a].degX;
                        oBall[a].style.left = oXY[a].x +'px';
                    }else{
                        oXY[a].x -= oXY[a].degX;
                        oBall[a].style.left = oXY[a].x +'px';
                    }
                    if(oXY[a].x+70 > bW){
                        oXY[a].turnX = false;
                    }
	                if(oXY[a].x-70 < 0){
                        oXY[a].turnX = true;
	                }
                    //y轴运动
	                if(oXY[a].turnY){
                        oXY[a].y += oXY[a].degY;
                        oBall[a].style.top = oXY[a].y +'px';
                    }else{
                        oXY[a].y -= oXY[a].degY;
                        oBall[a].style.top = oXY[a].y +'px';
                    }
                    if(oXY[a].y+70 > bH){
                        oXY[a].turnY = false;
                    }
                    if(oXY[a].y-70 < 0){
                        oXY[a].turnY = true;
                    }
                    requestAnimationFrame(Move);
                }
            })(i);
        }
	};

    //生成随机rgb颜色
	function fnRdmC(){
	    r = parseInt(Math.random()*256);
        g = parseInt(Math.random()*256);
        b = parseInt(Math.random()*256);
        return r+','+g+','+b;
	}
	//获取浏览器宽高
    function fnWH(){
        bW = document.documentElement.clientWidth;
        bH = document.documentElement.clientHeight;
    }
</script>
</html>